<template>
<article class="page page-transposition-cipher container">
	<h4 class="text-center">移位密码(简单)</h4>
	<form class="content">
		<fieldset>
			<legend>加密</legend>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">原 文</label>
				<div class="col-9">
					<input type="text" class="form-control form-control-sm" v-model.trim="enFormData.origin" placeholder="请输入要加密的文字">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">密 码</label>
				<div class="col-9">
					<input type="number" class="form-control form-control-sm" v-model.trim="enFormData.password" placeholder="请输入栅密码（须包含且仅包含1-n的连续数字，如：3124）">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">操 作</label>
				<div class="col-9">
					<x-button type="primary" block @click="encrypt">加 密</x-button>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">结 果</label>
				<div class="col-9">
					<input type="text" class="form-control form-control-sm" v-model="enFormData.cipher" readonly>
				</div>
			</div>
		</fieldset>
		<fieldset>
			<legend>解密</legend>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">密 文</label>
				<div class="col-9">
					<input type="text" class="form-control form-control-sm" v-model.trim="deFormData.cipher" placeholder="请输入密文">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">密 码</label>
				<div class="col-9">
					<input type="number" class="form-control form-control-sm" v-model.trim="deFormData.password" placeholder="请输入栅密码（须包含且仅包含1-n的连续数字，如：3124）">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">操 作</label>
				<div class="col-9">
					<x-button type="primary" block @click="decrypt">解 密</x-button>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">结 果</label>
				<div class="col-9">
					<input type="text" class="form-control form-control-sm" v-model="deFormData.origin" readonly>
				</div>
			</div>
		</fieldset>
	</form>
</article>
</template>

<script>
export default {
	name: 'transposition-cipher',
	data () {
		return {
			enFormData: {
				origin: '',
				password: '',
				cipher: '',
			},
			deFormData: {
				origin: '',
				password: '',
				cipher: '',
			},
		}
	},
	methods: {
		// 加密
		encrypt () {
			this.$set(this.enFormData, 'cipher', '')
			if (!this.enFormData.origin) {
				this.$toast('请输入要加密的字符串')
				return
			}
			if (!this.checkPassword(this.enFormData.password)) {
				this.$toast('密码不符合规则')
				return
			}
			let len1 = this.enFormData.origin.length
			let len2 = this.enFormData.password.length
			let arr = []
			let idx = 0
			while (idx < len1) {
				let str = this.enFormData.origin.substr(idx, len2)
				arr.push(str)
				idx += len2
			}
			arr = arr.map(v => {
				let _res = []
				let _arr = this.enFormData.password.split('')
				if (v.length < len2) {
					for (let j = 0; j < v.length; j++) {
						_res[_arr[j]] = v[j]
					}
					_res = _res.filter(item => !!item)
				} else {
					_arr.forEach((item, index) => {
						_res[index] = v[parseInt(item) - 1] || ''
					})
				}
				return _res.join('')
			})
			this.$set(this.enFormData, 'cipher', arr.join(''))
		},
		// 解密
		decrypt () {
			this.$set(this.deFormData, 'origin', '')
			if (!this.deFormData.cipher) {
				this.$toast('请输入要解密的字符串')
				return
			}
			if (!this.checkPassword(this.deFormData.password)) {
				this.$toast('密码不符合规则')
				return
			}
			let len1 = this.deFormData.cipher.length
			let len2 = this.deFormData.password.length
			let arr = []
			let idx = 0
			while (idx < len1) {
				arr.push(this.deFormData.cipher.substr(idx, len2))
				idx += len2
			}
			arr = arr.map(v => {
				let _res = []
				let _arr = this.deFormData.password.split('')
				_arr.forEach((item, index) => {
					_res[parseInt(item) - 1] = v[index] || ''
				})
				return _res.join('')
			})
			this.$set(this.deFormData, 'origin', arr.join(''))
		},
		// 校验密码
		checkPassword (password) {
			let result = true
			let len = password.length
			if (len) {
				for (let i = 1; i <= len; i++) {
					if (!password.includes(i)) {
						result = false
						break
					}
				}
			} else {
				result = false
			}
			return result
		}
	}
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-transposition-cipher {
	display: flex;
	flex-direction: column;
	.content {
		height: 0;
		flex-grow: 1;
		overflow: hidden auto;
		.col-form-label {
			text-align: center;
		}
		fieldset {
			& + fieldset {
				margin-top: 1em;
			}
		}
	}
}
</style>
